<script setup lang="ts">
defineOptions({
  name: "Welcome"
});
</script>

<template>
  <div class="min-w-[1200px]">
    <h1>工业互联网操作系统原型样机</h1>
    <el-row :gutter="20">
      <el-col v-for="i in 5" :key="i" :span="4" class="col_w">
        <div class="systemPrototypeCard relative overflow-hidden">
          <el-card>
            <img src="@/assets/images/head_portrait.png" />
            <img
              class="absolute top-[37px] left-[37px]"
              src="@/assets/images/img_1.png"
            />
            <h2>工业数据湖引擎</h2>
            <span class="text-xs">INDUSTRIAL MODEL ENGINE</span>
            <img
              class="absolute right-0 opacity-50 bottom-0 min-w-[280px] w-full"
              src="@/assets/images/bgc_1.png"
            />
            <button
              class="btn absolute w-[85px] h-[40px] cursor-pointer rounded-[4px] bottom-[40px] left-[20px]"
            >
              <img
                class="absolute top-[12px] left-[15px]"
                src="@/assets/images/play.png"
              />
              <span class="absolute top-[8px] font-size-base left-[35px]"
                >启用</span
              >
            </button>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<style lang="scss" scoped>
.col_w {
  flex: 0 0 20%;
  max-width: 20%;
}

.systemPrototypeCard {
  span {
    color: var(--an-secondary-text-color);
  }

  .btn {
    color: #fff;
    background-image: linear-gradient(to right, #05c1f8, #0589fe);

    span {
      color: #fff;
    }
  }

  .btn:hover,
  .btn:focus {
    background-color: var(--an-primary-hover-color);
    background-image: none;
  }

  .btn:active {
    background-color: var(--an-primary-active-color);
    background-image: none;
  }

  :deep(.el-card) {
    height: 340px;
    background-color: #ecf0f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 10%);
  }
}
</style>
